<template>
  <div>
    <!-- 查询结果 -->
    <el-table :ref="tableRef"
              :data="data"
              border
              :height="tableHeight"
              v-loading="listLoading"
              :element-loading-text="loadingText"
              style="width: 100%"
              @select="selectRow"
              @selection-change="selectionChange"
              @select-all="selectAllHandle">

             
      <!--行选择-->
      <el-table-column
        v-if="checkBoxEnable"
        type="selection"
        width="55">
      </el-table-column>

      <!--行索引-->
      <el-table-column v-if="showIndex"
                       type="index"
                       align="center"
                       width="50px"
                       label="序号">
      </el-table-column>

      
      <template v-for="(item,index) in listConfig">
         <slot :name="`slotFont${index}`"></slot>
        <!--操作列-->
        <el-table-column v-if="item.type === 'action'"
                         :key="index"
                         align="center"
                         label="操作"
                         :fixed="item.fixed"
                         :min-width="item.width"
        >
          <template slot-scope="scope">
            
            <el-button v-for="(action,actionIndex) in item.options"
                       v-if="actionLimit([scope.row,action])"
                       style="text-align: left;margin:2px"
                       :key="actionIndex"
                       size="mini"
                       :type="action.type"
                       @click="actionClick([$event,scope.row,action])"
            >
              {{actionLimitName([scope.row,action])}}
            </el-button>
          </template>

        </el-table-column>

        <!--标签列-->
        <el-table-column v-else-if="item.type === 'tag'"
                         :key="index"
                         align="center"
                         :min-width="item.width"
                         :label="item.name"
                         :prop="item.alias"
        >
          <template slot-scope="scope">
            <el-tag :type="tagTypeExchange([scope.row,item])" v-if="tagTextExchange([scope.row,item])">{{tagTextExchange([scope.row,item])}}
            </el-tag>
          </template>
        </el-table-column>

        <!--标签列-->
        <el-table-column v-else-if="item.type === 'click'"
                         :key="index"
                         align="center"
                         :min-width="item.width"
                         :label="item.name"
                         :prop="item.alias"
        >
          <template slot-scope="scope">

            <el-button type="text"  @click="clickTextExchange([scope.row,item])">
              {{clcikTextShowExchange([scope.row,item])}}</el-button>

          </template>
        </el-table-column>


        <!--标签列-->
        <el-table-column v-else-if="item.type === 'link'"
                         :key="index"
                         align="center"
                         :min-width="item.width"
                         :label="item.name"
                         :prop="item.alias"
        >
          <template slot-scope="scope">
            <img style="width: 100%;height: 50px;" :src="scope.row[item.alias]" :alt="scope.row[item.alias]">
          </template>
        </el-table-column>


         <!--标签列-->
        <el-table-column v-else-if="item.type === 'thumbnail'"
                         :key="index"
                         align="center"
                         :min-width="item.width"
                         :label="item.name"
                         :prop="item.alias"
        >
          <template slot-scope="scope">
            <img style="width: 60%;height: 50px;" :src="scope.row[item.alias]" :alt="scope.row[item.alias]" >
          </template>
        </el-table-column>

        
        <!--普通列-->
        <el-table-column v-else
                         :key="index"
                         align="center"
                         :min-width="item.width"
                         :label="item.name"
                         :prop="item.alias"
        >
        </el-table-column>
        <slot :name="`slot${index}`"></slot>
      </template>
    </el-table>
    <!-- 分页 -->
    <el-pagination v-if="showPagination"
                   align="right"
                   style="padding-top: 20px;"
                   @size-change="sizeChangeHandle"
                   @current-change="currentChangeHandle"
                   :current-page="pageParams.pageNo"
                   :page-sizes="[10, 20, 50, 100]"
                   :page-size="pageParams.pageSize"
                   :total="pageParams.total"
                   layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script type="text/ecmascript-6">

export default {
  /**
     * 组件名字
     */
  name: 'ResultListPanel',
  /**
     * 外部属性
     */
  props: {
    // 列配置
    listConfig: {
      type: Array,
      required: true
    },
    // 结果数据
    data: {
      type: Array,
      required: true
    },
    // table自定义ref, 调用clearSelection、toggleRowSelection时需设置
    tableRef: {
      type: String,
      default: ''
    },
    // 是否loading
    listLoading: {
      type: Boolean,
      required: true
    },
    // 是否显示分页器
    showPagination: {
      type: Boolean,
      default: true
    },
    // loading 提示文本
    loadingText: {
      type: String,
      default: '正在加载中...'
    },
    // 列表显示区域高度
    tableHeight: {
      type: Number,
      required: false
    },
    // 是否启动行选择
    checkBoxEnable: {
      type: Boolean,
      default: false
    },
    // 是否使用索引
    showIndex: {
      type: Boolean,
      default: true
    },
    // tag标签数据转化
    tagTextExchange: {
      type: Function,
      default: ([data, item]) => {
        return data
      }
    },
    // tag标签样式转化
    tagTypeExchange: {
      type: Function,
      default: ([data, item]) => {
        return ''
      }
    },

    tagTextExchange: {
      type: Function,
      default: ([data, item]) => {
        return data
      }
    },
    
    //click标签
    clickTextExchange: {
      type: Function,
      default: ([data, item]) => {
        return data
      }
    },

    clcikTextShowExchange: {
      type: Function,
      default: ([data, item]) => {
        
      }
    },

    // 行操作按钮权限，默认全部显示
    actionLimit: {
      type: Function,
      default: () => {
        return true
      }
    },
    // 行操作按钮名称
    actionLimitName:{
      type: Function,
      default:([data, item])=> {
        return item.name
      }
    }
  },
  /**
     * 定义属性
     */
  data () {
    return {
      // 分页数据
      pageParams: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      }
    }
  },
  /**
     * 方法集
     */
  methods: {

    /**
       * 切换行选中状态
       */
    toggleRowSelection (row) {
      this.$refs[this.tableRef].toggleRowSelection(row, true)
    },
    /**
       * 重置行选中状态
       */
    clearSelection () {
      this.$refs[this.tableRef].clearSelection()
    },
    /***
       * check box 选中单行
       * @param selection
       * @param row
       */
    selectRow (selection, row) {
      this.$emit('select', [selection, row])
    },
    /***
       * check box 选中全部
       * @param selection
       */
    selectAllHandle (selection) {
      this.$emit('selectAll', selection)
    },
    /***
       * check box 选中发生改变
       * @param selection
       */
    selectionChange (selection) {
      this.$emit('selectionChange', selection)
    },
    /**
       * 触发行操作
       * @param event
       * @param data
       * @param item
       */
    actionClick ([event, data, item]) {
      this.$emit('actionClick', [data, item])
    },

    /**
       * 分页大小发生改变
       */
    sizeChangeHandle (size) {
      this.pageParams.pageSize = size
      this.pageParams.pageNo = 1
      this.$emit('paginationChange', this.pageParams)
    },
    /**
       * 当前页码改变
       */
    currentChangeHandle (page) {
      this.pageParams.pageNo = page
      this.$emit('paginationChange', this.pageParams)
    }
  }
}
</script>

<style scoped lang="less">

</style>
